import { formatDuring } from '@/utils';
import useSyncState from '@/views/hooks/useSyncState';
import styled from '@emotion/styled';
import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import AgentService from '@/modules/Agent';
import Message from '@/modules/Message';

const ArrangeContainer = styled.div`
    width: fit-content;
    height: 40px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    margin-left: auto;
`;

const Content = styled.div`
	padding: 8px 16px;
	height: 100%;
	width: 100%;
	display: flex;
	.time {
		font-size: 14px;
		color: #0f1221;
		display: flex;
		height: 100%;
		align-items: center;
		padding-right: 12px;
		border-right: 1px solid #30354f;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		cursor: pointer;
	}
	.right-box {
		display: flex;
		align-items: center;
		display: flex;
		height: 100%;
		align-items: center;
		padding-left: 12px;
		.add-time {
			font-size: 14px;
			color: #0f1221;
			display: flex;
			align-items: center;
			height: 100%;
			border-bottom: 1px solid #dee3fb;
			padding: 10px 0px;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			cursor: pointer;
		}
		.close-btn {
			/* width: 68px; */
			height: 24px;
			background: #3e435c;
			border-radius: 6px;
			display: flex;
			align-items: center;
			margin-left: 14px;
			cursor: pointer;
			span {
				margin: 2px 20px;
				font-size: 14px;
				color: #dee3fb;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				cursor: pointer;
			}
		}
	}
`;

interface AfterworkTimeProps {
	onConfirm: () => void;
};

const AfterworkTime = (props: AfterworkTimeProps) => {
	const { onConfirm } = props;
	const { t } = useTranslation();

	const [time, setTime] = useSyncState<string>('00:05:00');

	const [duration, setDuration] = useSyncState<number>(300000);

	const [afterWorkEndTime, setAfterWorkEndTime] = useSyncState<any>(null);

	useEffect(() => {
		setDuration(duration() - 1000);
		setTime(formatDuring(duration()));
		let time = setInterval(function () {
			setDuration(duration() - 1000);
			setTime(formatDuring(duration()));
		}, 1000);
		setAfterWorkEndTime(time);
	}, []);

	useEffect(() => {
		if (duration() === 0) {
			clearInterval(afterWorkEndTime());
			closeTime();
		}
	}, [duration()]);

	const addTime = () => {
		if (duration() + 300000 >= 18000000) {
			Message.warning(t('after-work-timer'));
			return;
		}
		setDuration(duration() + 300000);
	};

	const closeTime = async () => {
		try {
			const data = await AgentService.closeAfterWork();
			if (data.code === 200) {
				clearInterval(afterWorkEndTime());
				AgentService.setAgentStatus({ ...AgentService.agentStatus, afterWork: false });
			}
		} catch (error) {
			console.log(error);

		} finally {
			onConfirm();
		}
	};

	const handleClick = () => {
		closeTime();
	};

	return (
		<ArrangeContainer>
			<Content>
				<div className="time">
					{time()}
				</div>
				<div className="right-box">
					<span className="add-time" onClick={addTime}>
						+5{t('minute')}
					</span>
					<div className="close-btn" onClick={handleClick}>
						<span>{t('confirm')}</span>
					</div>
				</div>
			</Content>
		</ArrangeContainer>
	);
};

export default AfterworkTime;
